/**
 * @author AdinZ
 * @date 2022/12/10 18:40
 *  
 */
.description-label {
  width: 120px;
}

.dark {
  .layout-container {
    .layout-left {
      background-color: var(--side-dark-bg-color);

      .tool-items {
        background-color: var(--side-dark-bg-color);
      }

    }

    .el-menu {
      .is-opened {
        background-color: var(--side-menu-dark-active-bg);

        .el-sub-menu__title {
          background-color: var(--side-menu-sub-dark-active-bg) !important;
        }
      }

      .is-active {
        //background-color: var(--side-menu-dark-active-bg);
        //.el-sub-menu__title {
        //  background-color: var(--side-menu-sub-dark-active-bg) !important;
        //}

      }

    }
  }

  .layout-main {
    //background-color: var(--side-dark-bg-color);

    .view-main {
      background-color: var(--html-dark-bg);
    }
  }


  .el-popper {
    .el-menu--vertical {
      .el-menu-item {
        color: white !important;
      }

      .is-active {
        color: var(--el-color-primary) !important;
      }
    }
  }
}

.el-popper {
  .el-menu--vertical {
    .el-menu-item {
      color: var(--side-bg-color) !important;
    }

    .is-active {
      color: var(--el-color-primary) !important;
    }
  }
}

.layout-container {
  .layout-left {
    height: 100vh;
    background-color: var(--side-bg-color);
  }

  .el-menu {

    .is-opened {
      background-color: var(--side-menu-active-bg);

      .el-sub-menu__title {
        background-color: var(--side-menu-sub-active-bg) !important;
      }
    }

    .is-active {
      //background-color: var(--side-menu-active-bg);


    }


  }

  .el-menu--collapse {
    .el-sub-menu__title {
      position: relative;
      display: flex;
      align-items: center;

      .side-icon {
        position: absolute;
        left: 10px;
      }

      .el-sub-menu__icon-arrow {
        position: absolute;
        right: 10px;
        padding-top: 1px;
      }
    }
  }

}

.layout-main {
  //background-color: var(--side-bg-color);
  padding: 0 15px 0 15px !important;

  .view-main {
    flex: 1;
    overflow: hidden;
  }
}

.layout-header {
  text-align: right;
  max-height: 55px;
  display: flex;
  align-items: center;
  height: 55px;

  .user {
    padding: 0 20px;
  }

  .header-item {
    margin: 0 10px;
    border-left: 1px solid rgba(204, 204, 204, 0.34);
  }
}

.sidebar-expand {
  width: var(--sidebar-expand-width);


  .sidebar-tool {
    left: var(--sidebar-expand-width);
  }

  .sidebar-header-username {
    font-size: 18px;
  }

}

.sidebar-fold {
  width: var(--sidebar-fold-width);

  .sidebar-tool {
    left: var(--sidebar-fold-width);
  }

  .sidebar-header-username {
    font-size: 13px;
    overflow: hidden;
  }

}

.sidebar {
  transition: width 0.5s;
  overflow: hidden;


  .el-avatar {
    transition: all 0.5s;
  }

  &-header {
    padding: 20px 15px;
    text-align: center;

    &-avatar {

    }

    &-username {
      font-size: 18px;
      color: white;
      transition: all 0.5s;
    }
  }


  .sidebar-tool {
    bottom: 0;
    position: fixed;
    z-index: 2;
    border: 0;
    outline: none;
    transition: left 0.5s;

    .tool-items {
      background-color: var(--side-bg-color);
      border-radius: 0 20px 0 0;
      padding: 10px 15px;
    }

    .item {
      color: white;
      border-radius: 30px;

    }

    .item-icon {
      :hover {
        transform: scale(1.05);
        transition: all .25s ease;
      }
    }
  }

}


.layout-table {
  &-query {
    text-align: left;
  }

  &-body {
    transition: height 0.5s;
  }

  &-page {
    .page-center {
      margin-right: 30px;
    }
  }
}

.layout-setting {
  .el-tabs__item {
    height: auto;
  }
}